<template>
  <div class="recomment">
    <loading v-if="!recommentData"></loading>
    <nodata v-else-if="!recommentData.length" />
    <div v-else class="recomment-wrapper">
      <ul>
        <h2>推荐下载资源：</h2>
        <li v-for="data in recommentData" :key="data._id" @click="gotoThisPage(data._id)">
          <div class="img" :style="setImageUpload(data.imageUrl)"></div>
          <div class="content">
            <div class="name">
              <p>{{data.name}}--</p>
              <p>{{data.navName}}</p>
            </div>
            <div class="author">
              <p>上传者：{{data.userName}}</p>
              <p>所需积分：{{data.integral}}</p>
              <p>下载次数：{{data.downloadNumber}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { setImageUpload } from "@/public/setBgImage.js";
import { mapActions } from "Vuex";
export default {
  name: "recomment",
  props: {
    userName: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      recommentData: "",
      setImageUpload: ""
    };
  },
  mounted() {
    this.setImageUpload = setImageUpload;
    this.initMethods();
  },
  methods: {
    gotoThisPage(id) {
      this.$router.push("/upload/" + id);
    },
    initMethods() {
      this.getAllResourcesData({ userName: this.userName })
        .then(res => {
          if (res.data.ok === 1) {
            this.recommentData = res.data.data;
          }
        })
        .catch(err => {
          console.log("错误提示：" + err);
        });
    },
    ...mapActions("user", ["getAllResourcesData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.recomment
  width: 100%
  min-height: 100px
  background-color: #fff
  margin-top: 10px
  .recomment-wrapper
    width: 100%
    padding: 20px
    >ul
      width: 100%
      >h2
        width: 100%
        height: 40px
        line-height: 40px
        padding-left: 10px
        color: #333
        @include title-before(5px,21px,9px,0px,#eb2001)
      >li
        width: 100%
        padding: 20px 0
        border-bottom: 1px solid #eee
        cursor: pointer
        @include flex(space-between,flex-start)
        .img
          width: 60px
          flex: 0 0 60px
          height: 60px
          @include setbackground()
        .content
          flex: 1
          padding: 0 20px
          .name, .author
            width: 100%
            height: 30px
            line-height: 30px
            @include flex(space-between,center)
        &:last-child
          border-bottom: none
</style>